<template>
  <div class="flow-menu" ref="tool">
    <div v-for="menu  in  menuList" :key="menu.id">
      <span class="ef-node-pmenu" @click="menu.open = !menu.open">
        <i style="color:#4169E1" v-show="menu.open" class="iconfont iconfolder-open-fill"></i>
        <i style="color:#4169E1" v-show="!menu.open" class="iconfont iconfolder-fill"></i>

        &nbsp;{{menu.name}}
      </span>
      <ul v-show="menu.open" class="ef-node-menu-ul">
        <draggable @end="end" @start="move" v-model="menu.children" :options="draggableOptions">
          <li v-for="subMenu in menu.children" class="ef-node-menu-li" :key="subMenu.id" :type="subMenu.type">
            <i style="color:#3B91FF" :class="subMenu.ico"></i> {{subMenu.name}}
          </li>
        </draggable>
      </ul>
    </div>
  </div>
</template>
<script>
import draggable from "vuedraggable";

var mousePosition = {
  left: -1,
  top: -1,
};

export default {
  data() {
    return {
      activeNames: "1",
      // draggable配置参数参考 https://www.cnblogs.com/weixin186/p/10108679.html
      draggableOptions: {
        preventOnFilter: false,
        sort: false,
        disabled: false,
        ghostClass: "tt",
        // 不使用H5原生的配置
        forceFallback: true,
        // 拖拽的时候样式
        // fallbackClass: 'flow-node-draggable'
      },
      // 默认打开的左侧菜单的id
      defaultOpeneds: ["1", "2"],
      menuList: [
        {
          id: "1",
          type: "group",
          name: "开始组件",
          ico: "iconfont iconshare",
          open: true,
          children: [
            {
              id: "11",
              type: "START",
              name: "开始节点",
              ico: "iconfont iconmr",
              params: [],
              content: {},
            },

            {
              id: "15",
              type: "END",
              name: "流程结束",
              ico: "iconfont iconfork",
              params: [],
              content: {},
            },
          ],
        },
        {
          id: "3",
          type: "group",
          name: "网络组件",
          ico: "iconfont iconfork",
          open: true,
          children: [
            {
              id: "31",
              type: "HTTP",
              name: "网络请求",
              ico: "iconfont iconearth",
              params: [],
              content: {},
            },
             {
              id: "35",
              type: "CLOUD_NACOS",
              name: "Nacos微服务",
              ico: "iconfont iconcloud-server",
              params: [],
              content: {},
            },
            {
              id: "32",
              type: "HTTP_UPLOAD",
              name: "文件上传",
              ico: "iconfont iconcloud-upload",
              params: [],
              content: {},
            },
            {
              id: "33",
              type: "TCP_CLIENT",
              name: "TCP客户端",
              ico: "iconfont iconpause",
              params: [],
              content: {},
            },
            {
              id: "34",
              type: "WEBSOCKET",
              name: "WEB-SOCKET",
              ico: "iconfont iconpause",
              params: [],
              content: {},
            },
          ],
        },
        {
          id: "5",
          type: "group",
          name: "数据库组件",
          ico: "iconfont iconfork",
          open: true,
          children: [
            {
              id: "51",
              type: "EXEC_SQL",
              name: "SQL执行",
              ico: "iconfont icondatabase-fill",
              params: [],
              content: {},
            },
            {
              id: "52",
              type: "QUERY_SQL",
              name: "SQL查询",
              ico: "iconfont icondatabase",
              params: [],
              content: {},
            },
          ],
        },
        {
          id: "2",
          type: "group",
          name: "文件组件",
          ico: "iconfont iconfork",
          open: false,
          children: [
            {
              id: "21",
              type: "FILE_SAVE",
              name: "保存文件",
              ico: "iconfont iconfile-add-fill",
              params: [],
              content: {},
            },
            {
              id: "25",
              type: "FILE_READ",
              name: "读取文件",
              ico: "iconfont iconread",
              params: [],
              content: {},
            },
            {
              id: "22",
              type: "FILE_MOVE",
              name: "移动文件",
              ico: "iconfont iconfile-copy-fill",
              params: [],
              content: {},
            },
            {
              id: "23",
              type: "FILE_DELETE",
              name: "删除文件",
              ico: "iconfont icondelete",
              params: [],
              content: {},
            },
          ],
        },
        {
          id: "6",
          type: "group",
          name: "监听组件",
          ico: "iconfont iconfork",
          open: false,
          children: [
            {
              id: "61",
              type: "TIMED_TASK",
              name: "定时器任务",
              ico: "iconfont iconreloadtime",
              params: [],
              content: {},
            },
            {
              id: "62",
              type: "TCP_SERVER",
              name: "TCP服务端",
              ico: "iconfont iconcloud-server",
              params: [],
              content: {},
            },
          ],
        },
        {
          id: "4",
          type: "group",
          name: "中间件组件",
          ico: "el-icon-video-pause",
          open: false,
          children: [
            {
              id: "13",
              type: "REDIS",
              name: "Redis操作",
              ico: "iconfont iconpointmap",
              params: [],
              content: {},
            },
            {
              id: "14",
              type: "QUERY_SQL",
              name: "Elasticsearch操作",
              ico: "iconfont iconsecurityscan-fill",
              params: [],
              content: {},
            },
          ],
        },
      ],
      nodeMenu: {},
    };
  },
  components: {
    draggable,
  },
  created() {
    /**
     * 以下是为了解决在火狐浏览器上推拽时弹出tab页到搜索问题
     * @param event
     */
    if (this.isFirefox()) {
      document.body.ondrop = function (event) {
        // 解决火狐浏览器无法获取鼠标拖拽结束的坐标问题
        mousePosition.left = event.layerX;
        mousePosition.top = event.clientY - 50;
        event.preventDefault();
        event.stopPropagation();
      };
    }
  },
  methods: {
    // 根据类型获取左侧菜单对象
    getMenuByType(type) {
      for (let i = 0; i < this.menuList.length; i++) {
        let children = this.menuList[i].children;
        for (let j = 0; j < children.length; j++) {
          if (children[j].type === type) {
            return children[j];
          }
        }
      }
    },
    // 拖拽开始时触发
    move(evt, a, b, c) {
      var type = evt.item.attributes.type.nodeValue;
      this.nodeMenu = this.getMenuByType(type);
    },
    // 拖拽结束时触发
    end(evt, e) {
      this.$emit("addNode", evt, this.nodeMenu, mousePosition);
    },
    // 是否是火狐浏览器
    isFirefox() {
      var userAgent = navigator.userAgent;
      if (userAgent.indexOf("Firefox") > -1) {
        return true;
      }
      return false;
    },
  },
};
</script>
